<template>
    <div v-if="this.$store.state.oneData.data">
        <el-row>
            <el-col :span="24">one列表</el-col>
        </el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline mt15">
            <el-form-item>
                <el-input v-model="formInline.name" placeholder="餐柜名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="formInline.mobile" placeholder="餐柜名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="formInline.status" placeholder="请选择状态">
                    <el-option v-for="(item, key) in stats" :value="item.unique_id" :key="item.unique_id" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">筛选</el-button>
            </el-form-item>
        </el-form>
        <table class="login-main mt15">
            <tr>
                <td>名称</td>
                <td>手机号</td>
                <td>状态</td>
                <td>职业</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in this.$store.state.oneData.data">
                <td>{{item.name}}</td>
                <td>{{item.mobile}}</td>
                <td>
                    <span v-if="item.status==1">正常</span>
                    <span v-else>禁用</span>
                </td>
                <td>{{item.profession}}</td>
                <td>
                    <el-button type="success" @click="fixClick(item)">修改</el-button>
                    <el-button type="warning" id="p-id">删除</el-button>
                </td>
            </tr>
        </table>
        <!-- 修改页面 -->
        <div v-if="this.$store.state.fixShow">
            <fixcom></fixcom>
        </div>
        <!-- 分页 -->
        <div v-if="one" class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChangeone" :current-page="currentPage" layout="total,  prev, pager, next"
                :total="this.$store.state.oneData.total"></el-pagination>
        </div>
        <div v-if="two" class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChangetwo" :current-page="currentPage2" layout="total,  prev, pager, next"
                :total="this.$store.state.oneData.total"></el-pagination>
        </div>
    </div>
</template>
<script> 
    import fixcom from './fix.vue'
    export default {
        name: 'homeone',
        data() {
            return {
                item:null,
                totalDataNumberone: 0,
                totalDataNumbertwo: 0,
                currentPage:1,
                currentPage2:1,
                one: true,
                two: false,
                form:{
                    name:'',
                    mobile:'',
                    status:'',
                },
                formInline:{
                    name:'',
                    mobile:'',
                    status:'',
                },
                stats: { "1": '正常', "-1": '禁用' },
            }
        },
        components: {
            fixcom,
        },
        created:function(){   
            this.oneallData();
        },
        methods: {
            fixClick(item) {
                this.$store.state.fixShow = true;
                this.$store.state.oneitem=item;
            },
            // 筛选
            onSubmit(){

            },
            // 列表
            oneallData(){
                var paramesdata = {
                    name: this.form.name,
                    mobile: this.form.mobile,
                    status:this.form.status,
                    page:this.currentpage,
                    page_size:this.$store.state.page_size,
                }
                this.$store.dispatch('allData', { method: "get", url: this.$store.state.baseurl + 'admin/admin/list', selected: 'oneData', paramesdata: paramesdata,code:'onecode'});
            },
            handleSizeChange(val) { },
            //数据展示分页   
            handleCurrentChangeone(val) {
                this.currentpage = `${val}`;
                console.log(this.currentpage);
                this.oneallData();
            },
            //搜索分页 
            handleCurrentChangetwo(val) {
                this.currentpage2 = `${val}`;
                this.onSubmit();
            },
        }
    }
</script>

<style scoped>
    .login-main {
        width: 80%;
        border-collapse: collapse;
        margin-left: calc(100%/2 - 80%/2);
        background-color: white
    }

    .login-main td {
        padding: 15px;
        text-align: center;
        border: 1px solid #ddd;
    }
    /*2*/
    .el-table__row td{text-align: center;}
    .block{width: 100%;margin: 30px auto;text-align: center;}

    tr:hover {
        background-color: #f4f4f4
    }
</style>